<template>
	<view class="page">
		<!-- 词书分组 -->
		<!-- <scroll-view class="nav-tab d_flex_b" scroll-x="true"> 
			<view :class="i==tabIndex?'tab ac':'tab'" @click="changeTab(i)" v-for="(item,i) in tabs" :key="i">{{item.name}}</view>
		</scroll-view> -->
		<view class="tabs">
			<u-tabs
				v-if="0"
        :current="tabIndex"
        :list="tabs"
        @change="changeTab"
        :lineWidth="50"
        lineColor="#5480F8"
        activeStyle="color: #5480F8"
      ></u-tabs>
		</view>
		<view class="list" v-if="list.length>0">
			<view class="book-item d_flex j_b " v-for="item in list" :key="item.id" @click="toInfo(item)">
				<view class="book">
					<image v-if="item.imgUrl" :src="item.imgUrl" mode=""></image>
					<image v-else src="/static/b1.png" mode=""></image>
				</view>
				<view class="info">
					<view class="row d_flex j_b items-center">
						<view class="name">{{ item.name }}</view>
						<view class="ku" v-if="!item.selected" @click.stop="openPop(item)">更换</view>
						<view class="doing" v-else>正在背</view>
					</view>
					<view class="pro">
						<u-line-progress :percentage="parseInt((item.graspTotal * 100) / item.total)" :height="12" activeColor="#34E179" inactiveColor="#F2F3F8" :showText="false"></u-line-progress>
					</view>
					<view class="status d_flex_b">
						<view class="item">
							<text class="label">已学</text>
							<text style="margin-left: 10rpx;" class="num">{{ item.graspTotal||0 }}</text>
							<text class="label">/{{ item.total||0 }}</text>
						</view>
						<view class="item">
							<text class="label">错词</text>
							<text v-if="item.errorTotal" class="label red">{{ item.errorTotal || '无' }}</text>
							<text v-else class="label" style="margin-left: 10rpx;">无</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="no-data" v-else>
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" ></u-empty>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="tip-pop" v-if="curBook">
				<view class="txt">是否确认更换至，【{{curBook.name}}】？</view>
				<view class="btn-box d_flex j_b a_c">
					<view class="btn" @click="cancel">取消</view>
					<view class="btn ac" @click="submit">确认更换</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupNumber" type="bottom" :safe-area="false">
			<view class="pop-box">
				<view class="tit">【{{curBook.name}}】每日计划</view>
				<view class="picker">
					 <picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
						<picker-view-column>
							<view class="item" v-for="(item,index) in numbers" :key="index">{{item}}个词</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="save">
					<view class="btn" @click="saveSet">确认更换</view>
				</view>
			</view>
		</uni-popup>		
	</view>
</template>

<script>
import qs from 'qs'
export default {
	data() {
		return {
			list: [],
			curBook:'',
			tabIndex:0,
      // 外界指定的id
      appointId: 0,
      tabItem: {},
			tabs:[
				{id:1,name:'英语四六级'},
				{id:2,name:'考研'},
				{id:3,name:'专升本'},
				{id:4,name:'日语'},
			],
			numbers:[30,50,60,80,100,150,200],
			value:'',
			num:30,
			indicatorStyle: `height: 90rpx;`,			
		};
	},
	onLoad(query) {
    let id = query.id
    let scene = decodeURIComponent(query.scene)
    if (scene) {
      const obj = qs.parse(scene)
      if (obj.id) {
        id = obj.id
      }
    }
    if (id) {
      this.appointId = Number(id)
    }
		this.getType();
	},
	methods: {
		getType(){
			this.$http.get1('/api/client/word/getWordBookTypes').then(res=>{
				if(res.code==200){
					this.tabs=res.data;
          this.tabItem = this.tabs[0]
					// if (this.appointId) {
					//   const index = this.tabs.findIndex(obj => obj.id == this.appointId)
					//   if (index != -1) {
					//     this.tabIndex = index;
					//     this.tabItem = this.tabs.find(obj => obj.id == this.appointId)
					//   }
					// }
					const index = this.tabs.findIndex(obj => obj.name == '湖南专升本')
					if (index != -1) {
						this.tabIndex = index;
						this.tabItem = this.tabs[index]
					}
					this.getList();
				}
			})
		},
		changeTab(item){
			this.tabIndex = this.tabs.findIndex(obj => obj.id == item.id);
      this.tabItem = item
			this.getList();
		},
		getList() {
			this.$http.get1('api/client/word/listBook',{
				wordBookTypeId:this.tabItem.id,
        userId: uni.getStorageSync('userInfo')?.id || '',
			}).then(res => {
				if (res.code == 200) {
					this.list = res.data;
				}
			});
		},
		openPop(item){
			this.curBook=item;
			// this.$refs.popup.open();
			this.open1()
		},
		submit(){
			this.$http.get1('/api/client/word/selectBook',{
				wordBookId:this.curBook.id,
				dayWordNum:uni.getStorageSync('wordNum')||10,
			}).then(res=>{
				if(res.code==200){
					uni.showToast({
						title: '更换成功'
					});
					this.cancel();
					this.getList();
					uni.navigateBack({
            delta: 2,
          });
				}
			})
		},
		cancel(){
			this.curBook='';
			this.$refs.popup.close();
		},
		toInfo(item){
			uni.setStorageSync('curBookData',item);
			if(item.isGroup==1){
				uni.navigateTo({
					url:'/pages/book/list?id='+item.id
				})
			}else{
				uni.navigateTo({
					url:'/pages/book/book?id='+item.id
				})
			}
		},		
		open1(){
			this.$refs.popupNumber.open();
		},
		close1() {
			this.$refs.popupNumber.close();
		},
		bindChange(e){
			this.value=e.detail.value;
		},
		saveSet(){
			this.num=this.numbers[this.value[0]] || 30;
			uni.setStorageSync('dayWordNum',this.num);
			this.submit()

			// this.$http.post('/api/client/word/updateWordMyPain',{
			// 	dayWordNum:this.num
			// }).then(res=>{
			// 	if(res.code==200){
			// 		uni.setStorageSync('dayWordNum',this.num);
			// 		this.submit()
			// 		// uni.showToast({
			// 		// 	title: '修改成功'
			// 		// });
			// 		// this.close1();
			// 	}else{
			// 		uni.showToast({
			// 			title: res.message,
			// 			icon:'none'
			// 		});
			// 	}
			// })
		},
	}
};
</script>

<style lang="scss">
page {
	background: #f2f3f8;
	box-sizing: border-box;
}
.no-data{
	padding: 100rpx 0;
}
.tabs{
	width: 750rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 0rpx 4rpx 2rpx rgba(42,65,152,0.1);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 19;
	white-space: nowrap;
	.tab{
		flex: 1;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #575A64;
		height:100rpx;
		display: inline-block;
		padding: 0 10rpx;
		box-sizing: border-box;
		// display: felx;
		// align-items: center;
		// justify-content: center;
		// line-height: 100rpx;
		&.ac{
			color: #5480F8;
			border-bottom: 2px solid #5480F8;
		}
	}
  .u-tabs__wrapper__nav__line {
    bottom: 0 !important;
  }
}
.list {
	padding: 120rpx 32rpx 30rpx;
	.book-item {
		margin-bottom: 20rpx;
		width: 100%;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		box-shadow: 0rpx 0rpx 4rpx 2rpx rgba(42, 65, 152, 0.1);
		border-radius: 20rpx;
		.book {
			width: 120rpx;
			height: 148rpx;
			margin-right: 20rpx;
			image {
				width: 120rpx;
				height: 148rpx;
			}
		}
		.info {
			flex: 1;
			.row {
				margin-bottom: 30rpx;
				.name {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
				}
				.ku {
					width: 108rpx;
					height: 48rpx;
					border-radius: 46rpx;
					border: 2rpx solid #5480f8;
					text-align: center;
					line-height: 48rpx;
					font-size: 24rpx;
					color: #5480f8;
				}
				.doing {
					width: 108rpx;
					font-size: 28rpx;
					color: #5480f8;
				}
			}
			.pro {
				margin-bottom: 20rpx;
			}
			.status {
				.item {
					.label {
						font-size: 24rpx;
						color: #bbbfcc;
						&.red {
							margin-left: 10rpx;
							color: #ff7474;
						}
					}
					.num {
						color: $theme;
						font-size: 24rpx;
					}
				}
			}
		}
	}
}
.tip-pop {
	width: 590rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 60rpx 40rpx 40rpx;
	box-sizing: border-box;
	.txt {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		margin-bottom: 30rpx;
		line-height: 1.8;
	}

	.tip {
		font-size: 24rpx;
		color: #333333;
		margin-bottom: 30rpx;
		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
	}
	.btn-box {
		.btn {
			width: 240rpx;
			height: 90rpx;
			border-radius: 46rpx;
			border: 2rpx solid #5480f8;
			text-align: center;
			line-height: 90rpx;
			color: #5480f8;
			font-size: 32rpx;
			font-weight: 500;
			&.ac {
				background-color: #5480f8;
				color: #fff;
			}
		}
	}
}

.pop-box{
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
	.tit{
		height: 120rpx;
		text-align: center;
		line-height: 120rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}
	.picker-view{
		height: 300rpx;
		.item{
			border:none;
			color: #5480F8;
      background-color: #F5F8FF;
			font-size: 32rpx;
      display: flex;
      justify-content: center;
      align-items: center;
		}
	}
	.save{
		width: 100%;
		height: 124rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.btn{
			margin: 0 auto;
			width: 626rpx;
			height: 90rpx;
			background: #5480F8;
			border-radius: 46rpx;
			text-align: center;
			line-height: 90rpx;
			color: #fff;
			font-size: 32rpx;
			font-weight: bold;
		}
	}
}
</style>
